<template>
  <div>
    <el-row>
      <el-col :span="12">
        <h4 class="statisticsUserModel2H4">下单时段统计（近三个月）</h4>
        <div id="userEchart"></div>
      </el-col>
      <el-col :span="12">
        <h4 class="statisticsUserModel2H4">预定时间统计（近三个月）</h4>
        <div id="userEchart2"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  watch: {
    userEchartData1(a, b) {
      this.userEchartData1 = a;
      this.carried(a);
    },
    userEchartData2(a, b) {
      this.userEchartData2 = a;
      this.carried2(a);
    },
  },
  props: ["userEchartData1", "userEchartData2"],
  data() {
    return {};
  },
  mounted() {

  },
  methods: {
    ObjectArr(data) {
      var arrName = [];
      var arrValue = [];
      data.forEach((e) => {
        for (var i in e) {
          arrName.push(i);
          arrValue = Object.values(e);
        }
      });
      return [arrName, arrValue];
    },
    carried(a) {
      var echart2 = echarts.init(document.querySelector("#userEchart"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.optionData(a), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    carried2(a) {
      var echart2 = echarts.init(document.querySelector("#userEchart2"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.optionData2(...a), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    optionData(arr) {
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.ObjectArr(arr)[0],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "出行人数",
            type: "bar",
            barWidth: "25%",
            data: this.ObjectArr(arr)[1],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#123597", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "#97ABFF", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#97ABFF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };

      return option;
    },

    optionData2(arr) {
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "当日",
              "提前1天",
              "提前2天",
              "提前3天",
              "提前4天",
              "提前5天",
              "提前6天",
              "一周以上",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            barWidth: "30%",
            data: [
              arr.today,
              arr.advance1,
              arr.advance2,
              arr.advance3,
              arr.advance4,
              arr.advance5,
              arr.advance6,
              arr.moreweek,
            ],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#9708CC", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "#97ABFF", // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#97ABFF", // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };

      return option;
    },
  },
};
</script>

<style scoped>
#userEchart,
#userEchart2 {
  width: auto;
  height: 400px;
}
.statisticsUserModel2H4 {
  margin-left: 25px;
  padding: 0;
  height: 0;
}
</style>